<template>
  <el-dialog :title="'详情'" :visible.sync="dialogVisible" width="1164px">
    <el-tabs v-model="activeName" class="mainContent">
      <el-tab-pane label="芯片信息" name="first">
        <el-form ref="formData" disabled :model="formData" label-width="82px" label-suffix="：">
          <el-row :gutter="80">
            <el-col :span="8">
              <el-form-item label="芯片名称" prop="displayName">
                <el-input v-model="formData.displayName" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="芯片型号" prop="model">
                <el-input v-model="formData.model" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <template v-if="formData.type === 1">
                <el-form-item label="适配标识" prop="compatible">
                  <el-input v-model="formData.compatible" />
                </el-form-item>
              </template>
              <template v-if="formData.type === 2">
                <el-form-item label="适配范围" prop="compatible">
                  <el-input v-model="formData.compatible" />
                </el-form-item>
              </template>
            </el-col>
          </el-row>
          <el-row :gutter="80">
            <el-col :span="8">
              <el-form-item label="芯片分类" prop="displayCategory">
                <el-select v-model="formData.displayCategory" class="w100">
                  <el-option v-for="item in categoryList" :key="item" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="芯片类型" prop="type">
                <el-select v-model="formData.type" class="w100">
                  <el-option label="主控芯片" :value="1"></el-option>
                  <el-option label="被控芯片" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="厂家名称" prop="manufacturer">
                <el-input v-model="formData.manufacturer" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="描述" prop="description">
            <el-input v-model="formData.description"></el-input>
          </el-form-item>
          <el-form-item label="概述" prop="overview">
            <el-input v-model="formData.overview" type="textarea" :rows="8"></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="芯片引脚" name="second">
        <el-image
          class="chipPin"
          :src="formData.pinFilesBase64 ? 'data:image/png;base64,' + formData.pinFilesBase64 : ''"
          :preview-src-list="formData.pinFilesBase64 ? ['data:image/png;base64,' + formData.pinFilesBase64] : []"
        >
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
      </el-tab-pane>
      <el-tab-pane v-if="formData.type === 1" label="时钟设置" name="third">
        <clockSetting
          ref="clockSetting"
          :clock-pic="formData.clockParameterFilesBase64"
          :form-data="clockFormData"
          :form-fields="clockParameters"
          :chip-id="formData.chipId"
        />
      </el-tab-pane>
      <el-tab-pane v-else label="芯片参数" name="fourth">
        <el-image
          class="chipPin"
          :src="
            formData.performanceParameterFilesBase64
              ? 'data:image/png;base64,' + formData.performanceParameterFilesBase64
              : ''
          "
          :preview-src-list="
            formData.performanceParameterFilesBase64
              ? ['data:image/png;base64,' + formData.performanceParameterFilesBase64]
              : []
          "
        >
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
import clockSetting from './clockSetting.vue'
export default {
  components: { clockSetting },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      dialogVisible: false,
      activeName: 'first',
      categoryList: [],
      formData: {
        pinFiles: [],
        clockParameterFiles: [],
        performanceParameterFiles: []
      },
      clockParameters: [],
      clockFormData: {}
    }
  },
  methods: {
    is(row, categoryList) {
      this.dialogVisible = true
      this.activeName = 'first'
      this.formData = row
      this.categoryList = categoryList
      if (row.type === 1) {
        this.clockParameters = row.clockParameters
        let clockFormData = {}
        row.clockParameters.forEach((item) => {
          clockFormData[item.symbol] = ['boolean'].includes(item.dataType)
            ? item.defaultValue === 'false'
              ? false
              : Boolean(item.defaultValue)
            : item.defaultValue ?? undefined
        })
        this.clockFormData = clockFormData
        this.$nextTick(() => {
          this.$refs.clockSetting.getRealFormFields()
        })
      } else {
        this.clockParameters = []
        this.clockFormData = {}
      }
    }
  }
}
</script>

<style lang="less" scoped>
.mainContent {
  padding-bottom: 10px;
}
.w100 {
  width: 100%;
}
.chipPin {
  width: 100%;
  // height: 300px;
  border: 1px solid #ddd;
}
/deep/.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 300px;
  background: #f5f7fa;
  color: #909399;
  font-size: 30px;
}
</style>
